<script setup lang="ts">
import {onMounted, ref} from "vue";
import articleApi from '@/api/article.ts'
const pageInfo = ref({
  currentPage:1,
  pageSize:5
})
const getHistoryList = async () => {
  const result = await articleApi.getHistoryList()
  history.value = result.rows
  history.value.forEach((item:any) => {
    item.time = item.updateTime || item.createTime
  })
}
const history = ref([])
onMounted( () => {
  getHistoryList()
})
// 跳转到详情页
const redirectTo = (url:string) => {
  window.location.href = url
}
// 删除历史记录
const deleteHistory = async (id:number) => {
  const result = await articleApi.deleteHistory(id)
  if (result.code == 200) {
    getHistoryList()
  }
}
// 是否显示加载更多
const isLoadingMore = ref(false)
const isShowLoadingText = ref(false)
const loadMore =async () => {
  isLoadingMore.value = true
  pageInfo.value.currentPage++
  const result = await articleApi.getHistoryList(pageInfo.value)
  if (result.code == 200) {
    if (result.rows.length == 0) {
      pageInfo.value.currentPage--
      isShowLoadingText.value = true
    }
    history.value = history.value.concat(result.rows)
  }
  isLoadingMore.value = false
}
</script>

<template>
  <div class="history">
<!--    历史页面-->
    <a-card style="height: 100%;overflow: scroll;">
      <div class="item" v-for="(item,index) in history" v-if="history.length>0"
           :key="index">
        <img :src="item.coverImg" class="left"/>
        <div class="right">
          <div class="right-top">
            <div class="title" @click="redirectTo(item.url)">{{item.title}}</div>
            <div class="time">{{item.updateTime || item.createTime}}</div>
          </div>
          <div class="right-bottom" @click="redirectTo(item.url)">{{item.content}}</div>
          <div class="button">
            <a-tag :color="item.tags.bgColor">{{item.tags.name}}</a-tag>
            <a-popconfirm title="确认删除？"
                          @confirm="deleteHistory(item.id)"
                          ok-text="确认"
                          cancel-text="取消">
              <DeleteOutlined
                  style="color: #7e2424"/>
            </a-popconfirm>
          </div>
        </div>
      </div>
      <div style="width: 100%;text-align: center" >
        <a-spin v-if="isLoadingMore"></a-spin>
        <div v-else-if="isShowLoadingText" style="color: rgb(128,125,125)">没有更多了...</div>
        <a-button @click="loadMore" v-else-if="!isLoadingMore && !isShowLoadingText && history.length > 0">加载更多</a-button>
      </div>
      <a-empty v-if="history.length <= 0"></a-empty>
    </a-card>
  </div>
</template>
<style scoped lang="scss">
.history{
  height: 100%;
  .item{
    display: flex;
    width: 100%;
    height: 120px;
    transition: all .3s;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover{
      transition: all .3s;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .left{
      width: 120px;
      aspect-ratio: 1/1;
      border-radius: 10%;
    }
    .right{

      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 15px;
      .right-bottom{
        overflow : hidden;
        text-overflow: ellipsis;//当对象内文本溢出时显示省略标记
        display: -webkit-box;
        -webkit-line-clamp:3;//这边的2指的是两行
        -webkit-box-orient: vertical;
      }
      .button{
        display: flex;
        justify-content: space-between;
        transform: translateY(12px);
      }
    }
    .right-top{
      display: flex;
      justify-content: space-between;
      .title{
        font-size: 16px;
        font-weight: 600;
      }
      .time{
        font-size: 12px;
        color: #999;

      }
    }
    .right-bottom{
      flex: 1;
    }
  }
}
</style>
